Основа пространственного веба: глубокий анализ WebXR Persistent Anchors

Представьте, что вы размещаете виртуальный предмет мебели в своей гостиной с помощью смартфона. Вы настраиваете его, обходите вокруг и смотрите, как он вписывается. Теперь представьте, что вы закрываете браузер, а когда возвращаетесь завтра, виртуальная мебель находится именно там, где вы ее оставили. Ваш партнер может даже открыть ту же веб-страницу на своем устройстве и увидеть тот же предмет мебели на том же месте. Это и есть магия постоянства в дополненной реальности, и она больше не является исключительной областью нативных приложений. Добро пожаловать в мир WebXR Persistent Anchors.

В течение многих лет веб-дополненная реальность (WebAR) была увлекательным, но часто мимолетным опытом. Цифровые объекты появлялись, но как только сессия заканчивалась, они исчезали в цифровом эфире. Это ограничивало WebAR краткосрочными маркетинговыми кампаниями или простыми демонстрациями. Постоянные якоря полностью меняют эту парадигму. Это основополагающая технология, которая позволяет "сохранять" цифровой контент в реальном мире, создавая значимые, многосессионные взаимодействия, доступные любому пользователю с веб-браузером.

Это всеобъемлющее руководство предназначено для разработчиков, менеджеров по продуктам и энтузиастов технологий по всему миру. Мы рассмотрим, что такое постоянные якоря, как они работают, как их реализовать с помощью WebXR Device API и какие невероятные приложения они открывают для поистине глобального, иммерсивного веба.

Что такое WebXR Anchors?

Прежде чем погрузиться в постоянство, давайте проясним, что такое якорь в контексте XR (Extended Reality). Якорь — это определенная, фиксированная точка и ориентация в реальном мире, которую может отслеживать система отслеживания устройства. Представьте себе это как цифровую кнопку, которую вы втыкаете в реальное место.

Ваше AR-совместимое устройство постоянно анализирует свое окружение с помощью камер и датчиков, процесс, часто называемый SLAM (Simultaneous Localization and Mapping). Оно определяет уникальные точки объектов — углы мебели, узоры на стене, текстуры на полу — чтобы понять свое положение и ориентацию в пространстве. Якорь — это точка, которая привязана к этому пониманию мира. Когда вы двигаетесь, устройство постоянно обновляет положение ваших виртуальных объектов относительно якоря, гарантируя, что они выглядят стабильными и зафиксированными в реальном мире.

Временные и постоянные якоря: ключевое различие

Различие между типами якорей имеет решающее значение для понимания их силы:

• Временные якоря (на основе сеанса): Это стандартные якоря, которые были доступны в WebXR в течение некоторого времени. Они создаются и существуют только в течение одного сеанса XR. Когда пользователь закрывает вкладку или уходит, якорь и его ссылка на реальный мир теряются навсегда. Они идеально подходят для мгновенных взаимодействий, таких как игра в быструю игру на столе.
• Постоянные якоря (межсессионные): Это то, что меняет правила игры. Постоянный якорь — это якорь, который может быть сохранен браузером и восстановлен в будущем сеансе. Устройство запоминает местоположение якоря относительно реального мира. Когда вы начинаете новый сеанс AR в том же физическом пространстве, вы можете попросить браузер "загрузить" этот якорь, и ваш виртуальный контент появится именно там, где вы его оставили.

Аналогия: Временный якорь — это как запись на доске, которая стирается в конце дня. Постоянный якорь — это как выгравированная информация на постоянной табличке, прикрепленной к стене.

"Проблема постоянства" и почему она важна для глобального веба

Отсутствие постоянства было фундаментальным барьером для создания глубоко полезных и привлекательных AR-приложений. Без этого каждый опыт — это "одноразовая" сделка, каждый раз возвращающаяся к нулю. Это ограничение препятствует разработке приложений, которые создают ценность с течением времени.

Рассмотрим следующие сценарии, которые ранее были невозможны в интернете:

• Совместное проектирование: Команда архитекторов в Токио и клиент в Берлине хотят просмотреть 3D-модель на физическом столе для совещаний. Без постоянства им пришлось бы вручную выравнивать модель каждый раз, когда они открывали приложение.
• Промышленное обучение: Технику необходимо оставить виртуальные инструкции на сложном оборудовании для следующего сменного рабочего. Без постоянства эти инструкции исчезнут, когда закончится сеанс первого техника.
• Персонализированные пространства: Пользователь хочет украсить свой дом виртуальным искусством. Он потеряет все свои тщательно размещенные произведения искусства каждый раз, когда закроет браузер.

Постоянные якоря решают эту проблему, создавая мост между цифровыми сессиями, основанный на физическом мире. Это позволяет создавать новый класс приложений, которые являются контекстными, совместными и непрерывными, формируя строительные блоки "пространственного веба" или "Метавселенной" — мира, где цифровая информация плавно интегрирована с нашей физической средой.

Как работают постоянные якоря: взгляд изнутри

Технология, лежащая в основе постоянных якорей, — это чудо компьютерного зрения и пространственных вычислений. Хотя API абстрагирует большую часть сложности, понимание основных концепций полезно для разработчиков.

1. Картографирование мира: Когда вы начинаете сеанс AR, ваше устройство начинает строить карту своего окружения. Это не фотографическая карта, а облако уникальных точек объектов. Эта карта — математическое представление геометрии пространства.
2. Создание якоря: Когда вы запрашиваете создание якоря в определенной позиции, система привязывает координаты этого якоря к базовой карте точек объектов.
3. Генерация UUID: Для постоянного якоря система генерирует Universally Unique Identifier (UUID) — длинную уникальную строку, — которая действует как постоянный ID якоря. Этот UUID передается вашему веб-приложению.
4. Сохранение UUID: Ваше приложение несет ответственность за сохранение этого UUID. Вы можете сохранить его в localStorage браузера для однопользовательского взаимодействия на одном устройстве или отправить его на сервер для совместного использования с другими пользователями или доступа с других устройств.
5. Повторная локализация: Когда вы начинаете новый сеанс в том же физическом месте, устройство снова начинает составлять карту своей среды. Оно сравнивает новую карту с ранее сохраненными картами. Если оно находит совпадение, оно успешно "повторно локализуется".
6. Восстановление якоря: Ваше приложение предоставляет сохраненные UUID в WebXR API. Если устройство успешно повторно локализовалось в области, где был создан этот якорь, система может определить текущее положение якоря и восстановить его для использования вашим приложением.

Примечание о конфиденциальности: Этот процесс разработан с учетом конфиденциальности. Карты точек объектов, хранящиеся на устройстве, являются абстрактными данными, а не читаемыми изображениями или видео окружения пользователя. Спецификация WebXR требует явного разрешения пользователя на использование таких функций, как якоря, гарантируя, что пользователь всегда находится под контролем.

Реализация постоянных якорей: практическое руководство для разработчиков

Перейдем к практике. Реализация постоянных якорей включает в себя несколько ключевых шагов в жизненном цикле WebXR Device API. В следующих примерах используется JavaScript и предполагается базовое знакомство с настройкой сеанса WebXR.

1. Обнаружение функций и запрос сеанса

Во-первых, вы должны запросить функцию `anchors` при создании сеанса XR. Это обязательная функция, то есть сеанс не запустится, если браузер не поддерживает ее.

            
async function activateXR() {
  // Check for WebXR support
  if (!navigator.xr) {
    console.error("WebXR is not available.");
    return;
  }

  // Request an immersive-ar session with the 'anchors' feature
  try {
    const session = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['anchors']
    });
    
    // ... session setup ...
  } catch (error) {
    console.error("Failed to start AR session:", error);
  }
}

            

              
                Copy
              
            
          

2. Создание и сохранение нового якоря

После запуска сеанса вы можете создать якорь. Обычно это делается в ответ на действие пользователя, например, нажатие на экран. Вы выполните хит-тест, чтобы найти реальную поверхность, а затем создадите якорь в этом положении.

            
// Inside your render loop or event handler
async function onSelect(event) {
  const frame = event.frame;
  const session = frame.session;

  // Create a hit test source
  const hitTestSource = await session.requestHitTestSource({ space: event.inputSource.targetRaySpace });
  const hitTestResults = frame.getHitTestResults(hitTestSource);

  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(xrReferenceSpace);

    try {
      // Create the anchor at the hit-tested position
      const anchor = await frame.createAnchor(hitPose.transform);
      console.log("Anchor created successfully.");

      // THE CRITICAL STEP: Store the anchor's UUID
      // The anchor object has a UUID if persistence is supported.
      if (anchor.anchorUUID) {
        saveAnchorUUID(anchor.anchorUUID);
      }

    } catch (error) {
      console.error("Could not create anchor:", error);
    }
  }
}

// Example function to save the UUID to localStorage
function saveAnchorUUID(uuid) {
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  if (!savedAnchors.includes(uuid)) {
    savedAnchors.push(uuid);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
    console.log(`Saved anchor UUID: ${uuid}`);
  }
}

            

              
                Copy
              
            
          

3. Восстановление якорей в новом сеансе

Когда начинается новый сеанс, ваша первая задача — загрузить сохраненные UUID и попросить систему восстановить их. Затем браузер попытается найти их в окружающей среде.

            
// When your session starts
async function onSessionStarted(session) {
  // ... other setup ...

  // Restore previously saved anchors
  await restoreSavedAnchors(session);
}

async function restoreSavedAnchors(session) {
  const savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');

  if (savedAnchors.length === 0) {
    console.log("No anchors to restore.");
    return;
  }

  console.log(`Attempting to restore ${savedAnchors.length} anchors...`);

  try {
    // The restoreAnchor method returns a promise that resolves when the anchor is found
    const restoredAnchors = await Promise.all(
      savedAnchors.map(uuid => session.restoreAnchor(uuid))
    );

    restoredAnchors.forEach(anchor => {
      if (anchor) {
        console.log(`Successfully restored anchor with UUID: ${anchor.anchorUUID}`);
        // Now you can attach your 3D model to this restored anchor
        add3DObjectToAnchor(anchor);
      }
    });

  } catch (error) {
    console.error("An error occurred while restoring anchors:", error);
  }
}

            

              
                Copy
              
            
          

4. Управление и удаление якорей

Ваше приложение также должно обрабатывать удаление якорей как из вашей сцены, так и из вашего постоянного хранилища. Свойство `trackedAnchors` сеанса — это `Set`, который содержит все якоря (как вновь созданные, так и восстановленные), которые в настоящее время отслеживаются.

            
// To delete an anchor
function deleteAnchor(anchor) {
  // Remove from persistent storage
  const uuid = anchor.anchorUUID;
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  const index = savedAnchors.indexOf(uuid);
  if (index > -1) {
    savedAnchors.splice(index, 1);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
  }

  // Tell the system to stop tracking it
  anchor.delete();
  console.log(`Deleted anchor with UUID: ${uuid}`);
}

// You can iterate through all tracked anchors in your render loop
function render(time, frame) {
  for (const anchor of frame.session.trackedAnchors) {
    // Get the anchor's pose and update your 3D object's position
    const anchorPose = frame.getPose(anchor.anchorSpace, xrReferenceSpace);
    if (anchorPose) {
      // Update 3D model matrix
    }
  }
}

            

              
                Copy
              
            
          

Глобальные варианты использования и приложения, открываемые постоянством

Постоянные якоря превращают WebAR из новинки в полезный инструмент, открывая мощные приложения в бесчисленных отраслях по всему миру.

Электронная коммерция и розничная торговля

Глобальные бренды могут предлагать возможности "попробуй, прежде чем купить", которые сохраняются. Пользователь в Бразилии может разместить виртуальный телевизор от корейского бренда электроники на своей стене. Они могут закрыть браузер, обсудить это со своей семьей и снова открыть его позже, чтобы увидеть его точно на том же месте. Это создает гораздо более убедительный и полезный опыт покупок.

Промышленные и корпоративные решения

Инженер по техническому обслуживанию на немецком автомобильном заводе может использовать веб-приложение для размещения постоянных цифровых маркеров на машине, указывающих точки, требующие обслуживания. Техник в следующей смене, возможно, подрядчик из другой страны, говорящий на другом языке, может открыть ту же веб-ссылку на своем планшете и немедленно увидеть AR-аннотации, идеально выровненные с реальным оборудованием, устраняя пробелы в общении и повышая эффективность.

Архитектура, инженерия и строительство (AEC)

Архитектурная фирма в Соединенных Штатах может поделиться ссылкой с клиентом в Дубае. Клиент может разместить виртуальную модель предлагаемого здания в масштабе 1:1 на фактической строительной площадке. Модель будет сохраняться, позволяя им пройтись по ней и предоставить обратную связь в течение нескольких дней, пока они рассматривают планы.

Навигация и ориентирование

Крупные, сложные места, такие как международные аэропорты, выставочные залы или университетские городки, могут развернуть постоянное AR-ориентирование. Посетители могут загрузить веб-страницу и увидеть постоянный виртуальный путь, направляющий их к своим воротам, стенду или лекционному залу. Это гораздо более интуитивно, чем пытаться следовать 2D-карте.

Образование и культура

Музеи могут создавать постоянные AR-экспонаты. Посетитель может направить свой телефон на скелет динозавра и увидеть постоянный слой информации, анимации и аннотации, которые остаются на месте, когда они обходят его. Студенты в классе могут совместно препарировать виртуальную лягушку на своих столах, при этом модель сохраняется на протяжении всего урока.

Искусство и развлечения

Художники могут создавать общественные цифровые художественные инсталляции, привязанные к определенным реальным местам. Пользователи могут посетить парк или городскую площадь, открыть URL-адрес и увидеть постоянную виртуальную скульптуру. Многопользовательские игры могут иметь постоянные элементы, с которыми игроки со всего мира могут взаимодействовать в общем физическом пространстве.

Вызовы и соображения для глобальной аудитории разработчиков

Несмотря на невероятную мощность, разработка с использованием постоянных якорей сопряжена с собственным набором задач, которые разработчики должны учитывать, особенно при создании для глобальной аудитории.

• Поддержка браузера и устройства: Модуль WebXR Anchors — относительно новый стандарт. Поддержка пока не является универсальной. В настоящее время он в основном доступен в Chrome для Android на устройствах, совместимых с ARCore. Крайне важно проверять поддержку функций и реализовать плавную деградацию для пользователей в неподдерживаемых браузерах или устройствах (например, iOS). Ваш опыт все равно должен быть функциональным, возможно, переходя в режим просмотра 3D.
• Условия окружающей среды: Базовая технология SLAM основана на стабильных визуальных функциях. Повторная локализация может не удаться, если окружающая среда значительно изменилась между сессиями. Резкие изменения освещения (день против ночи), перемещенная мебель или отсутствие четких визуальных функций (простая белая стена) могут помешать восстановлению якоря. Приложения должны быть разработаны для изящной обработки этих сбоев восстановления.
• Совместное использование между устройствами и платформами: Стандарт WebXR гарантирует, что якорь можно восстановить на том же устройстве. Само по себе это не решает проблему обмена местоположением якоря между разными устройствами (например, телефоном Android и будущей AR-гарнитурой) или платформами (WebXR и нативным приложением iOS ARKit). Решение этой проблемы "многопользовательского, многоустройственного" типа обычно требует дополнительного уровня технологий, часто называемого службой AR Cloud, которая может объединять и выравнивать пространственные карты из разных источников.
• Конфиденциальность и согласие пользователя: Как разработчики, мы несем ответственность за прозрачность перед пользователями. Поскольку постоянный AR включает в себя сохранение данных о физической среде пользователя, важно четко объяснить, почему вам нужно разрешение `anchors` и как будут использоваться данные. Доверие пользователей имеет первостепенное значение для принятия этой технологии.

Будущее за постоянством: что дальше для иммерсивного веба?

WebXR Persistent Anchors — это огромный шаг вперед, но это только начало. Эволюция иммерсивного веба движется к более связанному и контекстно-зависимому будущему.

Мы видим появление WebXR Geospatial API, который позволяет привязывать якоря к реальным географическим координатам (широта, долгота, высота). Это позволит создавать крупномасштабные AR-взаимодействия в масштабах города, построенные на открытых веб-стандартах.

Кроме того, разработка платформ AR Cloud обеспечит серверную инфраструктуру, необходимую для действительно общих, постоянных и межплатформенных AR-взаимодействий. Эти платформы будут решать сложную задачу выравнивания пространственных карт с миллионов разных устройств, создавая единого, общего цифрового двойника реального мира.

Сочетание этих технологий указывает на будущее, где веб вырывается из 2D-экрана. Он станет пространственным слоем информации, развлечений и утилит, с которым мы можем естественно взаимодействовать в нашем физическом окружении. Постоянные якоря являются критически важным, основополагающим элементом, который делает это видение возможным.

Заключение: Начните строить постоянный веб сегодня

WebXR Persistent Anchors — это больше, чем просто новый API; они представляют собой фундаментальный сдвиг в том, что возможно в интернете. Они позволяют разработчикам создавать AR-приложения с памятью, контекстом и долговременной ценностью. От преобразования способов совершения покупок, работы и обучения до создания новых форм искусства и развлечений — потенциал огромен.

Барьер для входа никогда не был таким низким. С современным смартфоном и веб-браузером разработчики в любой точке мира могут начать экспериментировать с созданием постоянных, осознающих мир взаимодействий. Путешествие к поистине иммерсивному, пространственному вебу продолжается, и оно строится на открытых стандартах, доступных каждому. Пришло время начать строить прямо сейчас.